<template>
  <div class="app-container">
    <!-- 搜索模块 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="进度名称" prop="scheName">
        <el-input v-model="queryParams.scheName" placeholder="进度名称" size="small" style="width: 240px" @keyup.enter.native="handleQuery" /></el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 图标权限模块 -->
    <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button v-hasPermi="['']" type="primary" plain icon="el-icon-plus" size="mini"
                @click="handleCs">测试</el-button>
        </el-col>
        <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row> -->
    <!-- 数据展示 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="进度名称" align="center" prop="scheName" :show-overflow-tooltip="true" />
      <el-table-column label="进度展示" align="center" prop="scheValue" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.scheValue"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="超出进度" align="center" prop="scheExceed" :show-overflow-tooltip="true" />
      <el-table-column label="进度规则" align="center" prop="scheRule" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_datetime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" prop="updateTime" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.update_datetime) }}</span>
        </template>
      </el-table-column>
    <!-- <el-table-column v-if="hasPermi([''])" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button v-hasPermi="['']" size="mini" type="text" icon="el-icon-edit"
                @click="handleUpdate(scope.row)">修改</el-button>
            <el-button v-hasPermi="['']" size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除</el-button>
        </template>
    </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增|修改 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <div style="width: 100%;height: 600px;overflow: auto">
        <el-row :gutter="6">
          <el-col :span="10">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="进度名称" prop="scheName">
                <el-input v-model="form.scheName" placeholder="进度名称" :disabled="disabledScheName" />
              </el-form-item>
              <el-form-item label="模板选择" prop="scheName">
                <el-select
                  v-model="form.processId"
                  placeholder="模板选择"
                  clearable
                  style="width: 100%;"
                  @change="scheNameChange"
                >
                  <el-option
                    v-for="dict in modelOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="文件选择" prop="fileName">
                <el-select
                  v-model="form.fileName"
                  placeholder="文件选择"
                  clearable
                  style="width: 100%;"
                  :disabled="disabledAddRule"
                  @change="fileNameChange"
                >
                  <el-option v-for="dict in fileOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
              </el-form-item>
              <el-form-item label="新增规则" prop="addRule">
                <el-cascader
                  v-model="form.addRule"
                  :options="ruleoptions"
                  :props="props"
                  clearable
                  style="width: 100%;"
                  :disabled="disabledAddRule"
                  @change="rulesChange"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="进度规则" prop="scheRule">
                <el-input v-model="form.scheRule" type="textarea" placeholder="进度规则" disabled />
              </el-form-item>
              <el-form-item label="进度值" prop="scheValue">
                <el-input v-model="form.scheValue" placeholder="进度值" disabled />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="14">
            <CalculatorM ref="calculator_m" @loadingComputeBtn_="loadingComputeBtn" @countComputeBtn_="countComputeBtn"></CalculatorM>
          </el-col>
        </el-row>
        <el-row v-if="dynamicShow">
          <dynamic-table
            ref="dynamicTable"
            v-loading="dynamicLoading"
            :table-data="tableRowData"
            :table-header="tableColData"
            :selection="true"
            @dynamicMultipleSelection_="dynamicMultipleSelection"
          >
          </dynamic-table>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listType } from "@/api/vadmin/process/approval/data";
import { listType as listType_m } from "@/api/vadmin/budget/formwork/dataapi";
import { listType as listType_data } from "@/api/vadmin/budget/channel/dataapi";
import { getFormWork } from "@/api/vadmin/budget/channel/channelapi";
import { treeByFormId } from "@/api/vadmin/budget/formwork/formworkapi";
import CalculatorM from "@/components/Calculator_M/index";
import DynamicTable from "@/components/MultistageHeader/index";
import { Decrypt } from "@/utils/AesHmacMD5";

export default {
  name: "ApprovalData",
  components: { CalculatorM, DynamicTable },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 创建时间日期范围
      dateRange: [],
      // 总条数
      total: 0,
      // 存储显示数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      rules: {},
      queryParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页显示几个
        scheName: undefined
      },
      // 控制进度名称是否可用
      disabledScheName: false,
      // 模板数据字典
      modelOptions: [],
      // 文件数据字典
      fileOptions: [],
      // 级联选择器多选
      props: { multiple: true },
      ruleoptions: [],
      disabledAddRule: true,
      // 表头
      tableColData: [],
      // 表内容
      tableRowData: [],
      // 控制文件数据显示
      dynamicShow: false,
      // 控制文件数据加载
      dynamicLoading: false,
      // Table表格多选
      multipleSelection: [],
      approvalId: undefined
    };
  },
  created() {
    this.approvalId = this.$route.params && this.$route.params.approvalId;
    this.getList(this.approvalId);
    this.getformData(this.approvalId);
  },
  methods: {
    // ============================================= 数据展示Table表单 ===================================
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = selection.length < 2;
    },
    /** 查询文件列表 */
    getList(approvalId) {
      this.loading = true;
      this.queryParams["approval_id"] = approvalId;
      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        var resData = JSON.parse(Decrypt(response.data));
        this.dataList = resData.results;
        this.total = resData.count;
        this.loading = false;
      });
    },
    // 模板转字典
    getformData(approvalId) {
      getFormWork(approvalId).then(response => {
        this.modelOptions = response.data;
      });
    },
    // ============================================= 按钮操作 ===================================
    // 新增
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "进度新增";
      this.disabledScheName = false;
    },
    // 删除
    handleDelete() { },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.approvalId);
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        scheRule: undefined,
        scheValue: undefined,
        addRule: undefined
      };
      this.resetForm("form");
    },
    // 模板 --- 改变
    scheNameChange() {
      this.dynamicShow = false;
      if (this.form.processId == "") {
        this.disabledAddRule = true;
        this.ruleoptions = [];
      } else {
        this.treeByFormId_M().then(response => this.listType_Header());
      }
    },

    // 查询工程之下的模板数据以及文件数据
    async treeByFormId_M() {
      treeByFormId(this.form.processId).then(response => {
        var resData = JSON.parse(Decrypt(response.data));
        this.ruleoptions = resData.treeInfo;
        this.fileOptions = resData.fileInfo;
        this.disabledAddRule = false;
      });
    },

    // 查询模板表头结构
    async listType_Header() {
      listType_m({ "formId": this.form.processId }).then(response => {
        this.tableColData = JSON.parse(Decrypt(response.data));
        this.dynamicShow = true;
      });
    },

    // 查询文件数据
    fileNameChange() {
      this.dynamicLoading = true;
      listType_data({ "formId": this.form.processId, "fileId": this.form.fileName }).then(response => {
        var resData = JSON.parse(Decrypt(response.data));
        this.tableColData = resData.tableColData;
        this.tableRowData = resData.tableRowData;
        this.dynamicLoading = false;
      });
    },

    // 规则---改变事件
    rulesChange() {
      // 格式转换，列表转字符串---> [11, 22 ,33 ]  ---> "11|22|33"
      var resData = [];
      this.form.addRule.forEach(item => {
        resData.push(item.join("|"));
      });
      this.$refs.calculator_m.inputData = resData;
    },

    // 计算器子传父---保存规则
    loadingComputeBtn(val) {
      this.form.scheRule = val;
    },

    // 计算器子传父---运算规则
    countComputeBtn(val) {},

    // Table --- 选择更改
    dynamicMultipleSelection(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
